<template>
	<view>
		<view class='searchBox'>
			<view class='searchs'>
				<icon type='search' size='16'></icon>
				<input type='text' placeholder='课程名称' placeholder-class='placeholder'></input>
			</view>
			<view class='searchBtn'>搜索</view>
		</view>

		<view class='posi_rela'>
			<view class='posi_rela' style='z-index:9;'>
				<scroll-view scroll-x="true" class="tabs" @click="tabFun">
					<view :class="tabArr.curHdIndex=='0'? 'active' : ''" id="tab-hd01" data-id="0">语文</view>
					<view :class="tabArr.curHdIndex=='1'? 'active' : ''" id="tab-hd02" data-id="1">数学</view>
					<view :class="tabArr.curHdIndex=='2'? 'active' : ''" id="tab-hd03" data-id="2">英语</view>
					<view :class="tabArr.curHdIndex=='3'? 'active' : ''" id="tab-hd04" data-id="3">政治</view>
					<view :class="tabArr.curHdIndex=='4'? 'active' : ''" id="tab-hd05" data-id="4">历史</view>
					<view :class="tabArr.curHdIndex=='5'? 'active' : ''" id="tab-hd06" data-id="5">地理</view>
				</scroll-view>
				<view class='filterBox' @click='onFliter'>
					筛选 <image :src="filterIcon ? '../../static/ic_zhankai2x.png' : '../../static/ic_shou2x.png'"></image>
				</view>
			</view>

			<!-- 筛选菜单 -->
			<view class='filterMask' v-show='filterMask'></view>
			<view class='popFilter' v-show='popFilter'>
				<view class='labelBox'>
					<view class='filterTitle'>年级</view>
					<view class='filterLabels'>
						<view class='filterLabel curr'>小学一年级</view>
						<view class='filterLabel'>小学二年级</view>
						<view class='filterLabel'>小学三年级</view>
						<view class='filterLabel'>小学四年级</view>
						<view class='filterLabel'>小学五年级</view>
					</view>
					<view class='filterTitle'>版教</view>
					<view class='filterLabels'>
						<view class='filterLabel'>人教版</view>
						<view class='filterLabel curr'>鲁教版</view>
						<view class='filterLabel'>冀教版</view>
						<view class='filterLabel'>沪教版</view>
					</view>
					<view class='filterTitle'>课程</view>
					<view class='filterLabels'>
						<view class='filterLabel curr'>同步课程</view>
						<view class='filterLabel'>整体课程</view>
						<view class='filterLabel'>知识点课程</view>
						<view class='filterLabel'>知识点课程</view>
					</view>
				</view>
				<view class='bottomMenu'>
					<view>重置</view>
					<view class='select' @click='onComplete'>完成(3)</view>
				</view>
			</view>


			<view class="tabContent">
				<!-- 语文 -->
				<view class="tabCont-item" :class="tabArr.curBdIndex=='0'? 'active' : ''">
					<view class='courses'>
						<view class='courseList' v-for="(course, index) in courses" :key="index">
							<image :src='course.img'></image>
							<view class='fs_30'>{{course.title}}</view>
							<view class='courseData'>{{course.score}}分<text>|</text>{{course.num}}人学过</view>
							<view class='coursePrice'>￥{{course.price}}<text>(会员免费)</text></view>
						</view>
					</view>
				</view>
				<!-- 数学 -->
				<view class="tabCont-item" :class="tabArr.curBdIndex=='1'? 'active' : ''">222</view>
				<!-- 英语 -->
				<view class="tabCont-item" :class="tabArr.curBdIndex=='2'? 'active' : ''">333</view>
				<!-- 政治 -->
				<view class="tabCont-item" :class="tabArr.curBdIndex=='3'? 'active' : ''">444</view>
				<!-- 历史 -->
				<view class="tabCont-item" :class="tabArr.curBdIndex=='4'? 'active' : ''">555</view>
				<!-- 地理 -->
				<view class="tabCont-item" :class="tabArr.curBdIndex=='5'? 'active' : ''">666</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// tab
				tabArr: {
					curHdIndex: 0,
					curBdIndex: 0
				},
				// 筛选
				filterIcon: false,
				filterMask: false,
				popFilter: false,
				interval: 2000,
				duration: 500,
				courses: [
					{
						img: '../../static/img_kecheng02.png',
						title: '2018年高一语文课程试卷讲解',
						score: 4.8,
						num: 1024,
						price: 399
					},
					{
						img: '../../static/img_kecheng02.png',
						title: '2018年高一语文课程试卷讲解',
						score: 4.8,
						num: 1024,
						price: 399
					},
					{
						img: '../../static/img_kecheng02.png',
						title: '2018年高一语文课程试卷讲解',
						score: 4.8,
						num: 1024,
						price: 399
					},
					{
						img: '../../static/img_kecheng02.png',
						title: '2018年高一语文课程试卷讲解',
						score: 4.8,
						num: 1024,
						price: 399
					}
				]
			}
		},
		methods: {
			// tab
			tabFun: function(e) {
				//获取触发事件组件的dataset属性  
				var _datasetId = e.target.dataset.id;
				// console.log("----" + _datasetId + "----");
				var _obj = {};
				_obj.curHdIndex = _datasetId;
				_obj.curBdIndex = _datasetId;
				this.tabArr = _obj
			},

			// 筛选按钮
			onFliter: function() {
				this.filterIcon = !this.filterIcon,
					this.filterMask = !this.filterMask,
					this.popFilter = !this.popFilter
			},
			onComplete: function() {
				this.filterIcon = false,
					this.filterMask = false,
					this.popFilter = false
			}
		}
	}
</script>

<style>
	.searchBox {
		background-color: #fff;
		padding: 20rpx 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		z-index: 9;
	}

	.searchs {
		display: flex;
		background-color: #F1F5F8;
		border-radius: 40rpx;
		padding: 15rpx 30rpx;
		width: 530rpx;
	}

	.searchs icon {
		margin-top: 10rpx;
	}

	.searchs input {
		padding-left: 15rpx;
		width: 100%;
	}

	.placeholder {
		font-size: 30rpx;
		color: #8D9194;
	}

	.searchBtn {
		color: #9D9D9D;
		font-size: 32rpx;
	}

	/* tab */
	.tabs {
		display: flex;
		line-height: 2.5;
		background: #fff;
		white-space: nowrap;
	}

	.tabs view {
		display: inline-block;
		color: #686868;
		text-align: center;
		font-size: 30rpx;
		border-bottom: 1rpx solid #eee;
		width: 140rpx;
	}

	.tabs view:last-child {
		margin-right: 150rpx;
	}

	.tabs .active {
		color: #000;
		position: relative;
	}

	.tabs .active::after {
		content: "";
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		width: 20%;
		height: 5rpx;
		background: #1F7AFF;
		margin: 0 auto;
	}

	.tabContent {
		padding: 30rpx;
	}

	.tabContent .tabCont-item {
		display: none;
	}

	.tabContent .tabCont-item.active {
		display: block;
	}

	/* 筛选 */
	.filterBox {
		position: absolute;
		top: 0;
		bottom: 0;
		right: 0;
		line-height: 80rpx;
		background-color: #fff;
		font-size: 30rpx;
		padding-right: 30rpx;
		padding-left: 30rpx;
		box-shadow: -10rpx 0 10rpx #eee;
		color: #2E90FF;
	}

	.filterBox image {
		width: 18rpx;
		height: 11rpx;
		vertical-align: middle;
	}

	/* 筛选按钮 */
	.filterMask {
		position: fixed;
		top: 210rpx;
		bottom: 0;
		left: 0;
		right: 0;
		background: rgba(0, 0, 0, 0.5);
		z-index: 8;
	}

	.popFilter {
		position: absolute;
		left: 0;
		right: 0;
		background: #fff;
		z-index: 9;

	}

	.labelBox {
		padding: 30rpx;
	}

	.filterTitle {
		font-size: 26rpx;
		color: #626262;
	}

	.filterLabels {
		display: flex;
		margin-top: 20rpx;
		flex-wrap: wrap;
	}

	.filterLabel {
		background: #f1f1f1;
		font-size: 26rpx;
		color: #626262;
		padding: 15rpx 0;
		margin-right: 3%;
		width: 30%;
		box-sizing: border-box;
		margin-bottom: 20rpx;
		text-align: center;
	}

	.curr {
		background-color: #D3E5FF;
		color: #116FF9;
	}

	.bottomMenu {
		display: flex;
		align-items: center;
		border-top: 1rpx solid #eee;
	}

	.bottomMenu view {
		flex: 1;
		text-align: center;
		line-height: 3;
	}

	.bottomMenu view:last-child {
		border-left: 1rpx solid #eee;
	}

	.select {
		background-color: #589FFF;
		color: #fff;
	}
	
	/* 课程列表 */
	.courses{
		display: flex;
		align-items: center;
		flex-wrap: wrap;
	}
	.courseList{
	  width: 48%;
	  margin-bottom: 4%;
	}
	.courses .courseList:nth-child(odd){
		margin-right: 4%;
	}
	.courseList image{
	  width: 100%;
	  height: 248rpx;
	}
	.courseData{
	  font-size:24rpx;
	  color:#9D9D9D;
	  margin:10rpx 0;
	}
	.coursePrice{
	  color: #F14927;
	  font-size: 36rpx;
	}
	.coursePrice text{
	  color: #B48A59;
	  font-size: 26rpx;
	  margin-left: 10rpx;
	}
</style>
